@import "src/styles/variable.scss";

$themeColor: unquote("#1890FF");
$sucessColor: unquote("#67C23A");
$fillColor: unquote("#00000073");

.common-list {
    height: 100vh;
    .scroll-container {
        padding: 4px;
        height: calc(100vh - 97px);
        // padding-bottom: 28px;
        .list-container {
            padding: 4px;
            .adm-list-item {
                border-radius: 8px;
                .adm-list-item-content-main {
                    padding: 12px;
                    .content {
                        padding-bottom: 8px;
                        p {
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            .yellow {
                                color: rgb(238, 158, 0);
                            }
                            .green {
                                color: rgb(31, 205, 182);
                            }
                            .orange {
                                color: rgb(232, 127, 54);
                            }
                            .blue {
                                color: $fontBlue;
                            }
                            span {
                                &:first-child {
                                    font-weight: 600;
                                    width: 82px;
                                }
                                &:last-child {
                                    flex: 1;
                                }
                            }
                        }
                    }
                }
            }
            &:last-child {
                padding-bottom: 20px;
            }
        }
    }
    .search {
        .adm-search-bar {
            width: 100%;
        }
    }
}

.sign-page {
    height: 100%;
    h2 {
        padding: 6px;
        text-align: center;
    }
    .sign-content {
        height: calc(100% - 42px);
        .adm-collapse {
            height: 100%;
            overflow-y: auto;
            .adm-collapse-panel-header {
                padding-left: 20px;
                background-color: #f1f4f7;
                &::before {
                    content: "";
                    width: 4px;
                    height: 20px;
                    background-color: #0078d4;
                    position: absolute;
                    left: 8px;
                    top: 16px;
                }
            }
            .adm-collapse-panel-content-inner {
                font-weight: 600;
                padding: 8px;
                border-radius: 4px;
                background-color: #f8f7f7;
                .adm-list-item {
                    background-color: #fff;
                    .adm-list-item-content {
                        padding-right: 2px;
                        .adm-list-card {
                            margin: 0;
                        }

                        //步骤条
                        .m-steps-box {
                            padding: 10px 0;
                            display: flex;
                            flex-direction: column;

                            .m-steps-item {
                                display: inline-block;
                                overflow: hidden;
                                font-size: 14px;
                                line-height: 24px;
                                min-width: 120px;
                                white-space: nowrap;
                                padding: 0 10px 10px 10px;

                                .m-info-wrap {
                                    display: flex;
                                    min-height: 80px;

                                    .m-steps-icon {
                                        display: inline-block;
                                        position: relative;
                                        margin-right: 8px;
                                        width: 32px;
                                        height: 32px;
                                        line-height: 30px;
                                        border-radius: 50%;
                                        text-align: center;
                                    }

                                    .m-steps-content {
                                        // display: inline-block;
                                        flex: 1;
                                        vertical-align: top;

                                        .u-steps-title {
                                            font-size: 16px;
                                            position: relative;
                                            // display: inline-block;
                                            padding-right: 16px;
                                            font-weight: 900;
                                            line-height: 24px;
                                            white-space: break-spaces;
                                            .signing {
                                                float: right;
                                                color: #1890ff;
                                            }
                                        }

                                        .u-steps-description {
                                            font-size: 12px;
                                            word-wrap: break-word;
                                            padding-top: 5px;

                                            .u-steps-li {
                                                margin: 0;
                                                padding: 0;
                                                list-style: none;
                                                line-height: 24px;

                                                .icon {
                                                    margin-right: 3px;
                                                }
                                                .status {
                                                    float: right;
                                                    font-size: 16px;
                                                    color: #444;
                                                }
                                            }
                                            &.u-long {
                                                white-space: pre-line;

                                                .u-steps-li {
                                                    display: inline-block;
                                                    min-width: 120px;
                                                    margin-right: 20px;
                                                }
                                            }
                                        }
                                    }
                                }
                            }

                            .u-tail {
                                background: #e8e8e8;
                                position: absolute;
                                top: 16px;
                                left: 100%;
                                display: block;
                                width: 3000px;
                                height: 1px;
                                content: "";
                            }

                            .finished {
                                .m-steps-icon {
                                    background: #fff;
                                    border: 2px solid rgba(0, 0, 0, 0.25);
                                    border-color: $sucessColor;

                                    .u-icon {
                                        fill: $sucessColor;
                                        width: 16px;
                                        height: 16px;
                                        vertical-align: top;
                                        margin-top: 6px;
                                    }
                                    &:after {
                                        position: absolute;
                                        top: 30px;
                                        left: 12px;
                                        display: block;
                                        width: 2px;
                                        height: 3000px;
                                        content: "";
                                        background: $sucessColor;
                                    }
                                }

                                .m-steps-content {
                                    .u-steps-title {
                                        color: $sucessColor;
                                    }

                                    .u-steps-description {
                                        color: $sucessColor;
                                    }
                                }
                            }

                            .process {
                                .m-steps-icon {
                                    background: $themeColor;
                                    border: 2px solid rgba(0, 0, 0, 0.25);
                                    border-color: $themeColor;

                                    .u-icon {
                                        color: #fff;
                                    }

                                    &:after {
                                        background: #e8e8e8;
                                        position: absolute;
                                        top: 30px;
                                        left: 12px;
                                        display: block;
                                        width: 2px;
                                        height: 3000px;
                                        content: "";
                                    }
                                }

                                .m-steps-content {
                                    color: $themeColor;

                                    .u-steps-title {
                                        font-weight: 900;
                                        color: $themeColor;
                                    }

                                    .u-steps-description {
                                        color: $themeColor;
                                    }
                                }
                            }

                            .last-process {
                                .m-steps-icon {
                                    background: $themeColor;
                                    border: 2px solid rgba(0, 0, 0, 0.25);
                                    border-color: $themeColor;

                                    .u-icon {
                                        color: #fff;
                                    }
                                }

                                .m-steps-content {
                                    .u-steps-title {
                                        font-weight: 600;
                                        color: rgba(0, 0, 0, 0.85);
                                    }

                                    .u-steps-description {
                                        color: rgba(0, 0, 0, 0.65);
                                    }
                                }
                            }

                            .middle-wait {
                                .m-steps-icon {
                                    background: #fff;
                                    border: 2px solid rgba(0, 0, 0, 0.25);

                                    .u-icon {
                                        color: rgba(0, 0, 0, 0.25);
                                    }

                                    &:after {
                                        background: #e8e8e8;
                                        position: absolute;
                                        top: 30px;
                                        left: 12px;
                                        display: block;
                                        width: 2px;
                                        height: 3000px;
                                        content: "";
                                    }
                                }

                                .m-steps-content {
                                    .u-steps-title {
                                        color: $fillColor;
                                    }

                                    .u-steps-description {
                                        color: $fillColor;
                                    }
                                }
                            }

                            .last-wait {
                                margin-right: 0;

                                .m-steps-icon {
                                    background: #fff;
                                    border: 2px solid rgba(0, 0, 0, 0.25);

                                    .u-icon {
                                        color: rgba(0, 0, 0, 0.25);
                                    }
                                }

                                .m-steps-content {
                                    .u-steps-title {
                                        color: $fillColor;
                                    }

                                    .u-steps-description {
                                        color: $fillColor;
                                    }
                                }
                            }

                            .last {
                                .m-steps-icon {
                                    &:after {
                                        background: #e8e8e800;
                                        position: absolute;
                                        top: -16px;
                                        left: 36px;
                                        display: block;
                                        width: 3000px;
                                        height: 1px;
                                        content: "";
                                    }
                                }
                            }
                        }
                        .collapse-mind {
                            border-radius: 6px;
                        }
                        .collapse-sign {
                            margin: 20px 0;
                            .date {
                                display: flex;
                                justify-content: space-between;
                                font-size: 18px;
                                border: 1px solid #ccc;
                                border-radius: 16px;
                                padding: 2px 20px;
                                align-items: center;
                            }
                            .operate {
                                display: flex;
                                justify-content: space-between;
                                margin: 20px 0;
                                button {
                                    border: 1px solid #ccc;
                                    border-radius: 10px;
                                    margin: 0 4px;
                                }
                            }
                        }
                    }
                }
                & > .adm-list-item > .adm-list-item-content > .adm-list-item-content-main {
                    padding: 0;
                }
            }
        }
    }
}

//流转通知
.flow-page {
    height: 100vh;
    overflow: hidden;
    .flow-container {
        height: calc(100% - 52px);
        padding: 20px 8px;
        background-color: #fff;
        overflow-y: scroll;
        .step-icon {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            color: #fff;
        }
        .adm-step-status-finish {
            --icon-color: #4999fc;
            .step-icon,
            .adm-step-indicator::after {
                background-color: #4999fc;
            }
        }
        .adm-step-status-wait {
            --icon-color: #ced0da;
            .step-icon,
            .adm-step-indicator::after {
                background-color: #ced0da;
            }
        }
        .adm-step-status-process {
            --icon-color: #fcb154;
            .step-icon,
            .adm-step-indicator::after {
                background-color: #fcb154;
            }
            .adm-step-title {
                color: #444;
            }
        }
        .step-record {
            padding: 8px;
            border-radius: 8px;
            background-color: #f7f7f7;
            .reali {
                list-style: none;
                margin: 5px 0;

                .circle {
                    width: 10px;
                    height: 10px;
                    border-radius: 50%;
                    display: inline-block;
                    margin-right: 5px;
                }

                .titles {
                    width: 100%;
                    display: flex;
                    //justify-content: space-between;
                    //align-items: center;
                    font-size: 13px;
                    font-weight: 400;
                    //color: #435074;
                }

                .name {
                    display: inline-block;
                    line-height: 26px;
                    font-size: 13px;
                    margin-right: 30px;
                }

                .reason {
                    white-space: normal;
                    margin-bottom: 5px;
                    margin-top: 5px;
                    text-align: left;
                    font-size: 13px;
                }

                .files {
                    margin: 0;
                    padding: 0 0 10px 0;
                    list-style: none;
                    border-bottom: 1px solid #eee;

                    .files-li {
                        cursor: pointer;

                        &:hover {
                            background: #91bce92b;
                        }
                    }
                }
            }
        }
    }
}
